<template>
  <div class="staff-box">
    <template v-if="staffList.length">
      <van-list 
        v-model="loading" 
        :finished="finished" 
        finished-text="" 
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad">
        <div class="staff" v-for="(staff, index) in staffList" :key="index">
          <template v-if="staff.headimgurl">
            <img :src="staff.headimgurl">
          </template>
          <template v-else>
            <img src="https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg"> 
          </template>
          <div class="info">
            <p>昵称：{{staff.nickname}}</p>
            <p v-if="staff.mobile">手机：{{staff.mobile}}</p>
            <p>姓名：{{staff.name}}</p>
          </div>
        </div>
      </van-list>
    </template>
    <template v-else>
      <no-data :noData="noData"></no-data>
    </template>
  </div>
</template>

<script>
  /* eslint-disable */
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)
  import noData from '@/components/noData/index'
  import { getStaffList } from '@/api/user/fxs/fxsApi'

  export default Vue.extend({
    components: { noData },
    data() {
      return{
        loading: false,
        finished: false,
        error: false,
        noData: {
          marginTop: '60px',
          width: '80px',
          text: '暂无员工', 
          txtMarginTop: '20px',
          img: 'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/card-list/no_data.png'
        },
        staffList: [],
        sendData: {
          p: 1
        }
      }
    },
    created() {
      this.init()
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener("reachbottom", () => {
        this.onLoad()
      })
    },
    methods: {
      init() {
        this.staffList = []
        this.finished = false
        this.$loadingWrap.show()
        getStaffList(this.sendData).then(res => {
          this.loading = false;
          this.$loadingWrap.close()
          this.sendData.p ++
          if (res.status == 1) {
            if (res.data && res.data.length) {
              this.staffList = res.data
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 加载更多
      onLoad() {
        if (this.finished) return false
        this.$loadingWrap.show()
        getStaffList(this.sendData).then(res => {
          this.loading = false;
          this.$loadingWrap.close()
          this.sendData.p ++
          if (res.status == 1) {
            if (res.data && res.data.length) {
              this.staffList = this.staffList.concat(res.data)
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  })
</script>

<style lang="scss">
  .staff-box{
    padding-bottom: 20px;
    .staff{
      display: flex;
      align-items: center;
      padding: 15px 20px;
      height: 172px;
      box-sizing: border-box;
      border-bottom: 1px solid #f3f3f3;
      background: #ffffff;
      img{
        margin-right: 40px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
      .info{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 120px;
        font-size: 28px;
        line-height: 36px;
        color: #333333;
      }
    }
  }
</style>